@import "./theme/base-import.less";

@attentionColor: #faad14;
.home-page {
  padding: 8px;
  .wrapper {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    overflow: hidden;
  }
  .order-list {
    width: 7rem;
    margin-bottom: 10px;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 6px;
    font-size: 12px;
    .user_detail {
      box-sizing: border-box;
      padding: 0 4px;
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      .avatar {
        border-radius: 6px;
        width: 38px;
        height: 38px;
        overflow: hidden;
        img {
          object-fit: cover;
          width: 100%;
          height: 100%;
        }
        .svg {
          width: 100%;
          height: 100%;
        }
      }
      .information {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin-left: 2px;
        overflow: hidden;
        .published {
          font-size: 10px;
        }
        .nickname {
          padding: 1px 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-weight: bolder;
        }
      }
      .order_price {
        width: 1.28rem;
        color: @price;
        .price {
          font-size: 16px;
          text-align: center;
          padding: 4px 0;
        }
      }
    }
    .describe_img {
      height: 7.28rem;
      padding-bottom: 10px;
      img {
        object-fit: cover;
        height: 100%;
        width: 100%;
      }
    }
    .order_address {
      display: flex;
      align-items: center;
      img {
        width: 16px;
        height: 16px;
      }
      span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0 2px;
      }
    }
    .order_date {
      margin: 6px 0;
      .expected {
        padding-left: 12px;
        box-sizing: border-box;
        position: relative;
        &::before {
          content: "";
          height: 26px;
          width: 6px;
          background: #40A9FF;
          position: absolute;
          left: 0;
        }
        .attention {
          color: @attentionColor;
          font-weight: bolder;
        }
      }
    }
    .describe_text {
      padding: 8px 0;
      box-sizing: border-box;
      max-height: 70px;
      p {
        margin: 0;
        position: relative;
        padding-left: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        &::before {
          content: "";
          height: 16px;
          width: 6px;
          background: @attentionColor;
          position: absolute;
          left: 0;
        }
      }
    }
  }

  .placeholder-element {
    width: 100%;
  }

  .empty-element {
    width: 100%;
    display: flex;
    justify-content: center;
    .describe {
      font-size: 14px;
      text-align: center;
      padding: 4px;
      border-radius: 6px;
      color: @globalWarnTextColor;
      background-color: @globalWarnBgColor;
    }
  }
}